<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>后台管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" href="/gradesign/assets/adminlte-2.3.7/css/AdminLTE.min.css"  />
    <link rel="stylesheet" href="/gradesign/assets/adminlte-2.3.7/css/skins/_all-skins.min.css" />
    <link rel="stylesheet" href="/gradesign/css/app.css" />
    <style type="text/css">
    	.user-header{
    		    background-color: #f9f7f7;
    	}
    </style>
</head>
<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wapper">
    <header class="main-header">
        <a href="/gradesign/back/index" class="logo">
            <span class="logo-lg">家庭记账管理系统</span>
        </a>
        <nav class="navbar navbar-static-top"  role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                	<li id="emailMenu" class="dropdown messages-menu">
                		<a href="#" class="dropdown-toggle" style="height:50px" data-toggle="dropdown" aria-expanded="true">
                			<i class="fa fa-envelope-o" style="color: white; "></i>
                			<span id="msg_amount_head" class="label label-warning" style="color:red ;background-color:#00c0ef;" th:text="${push_email_amount}"></span>
                		</a>
                		<ul class="dropdown-menu msg_menu"> 
	                		<li class="header">你有<span id="msg_amount" th:text="${push_email_amount}"></span>封未读邮件</li>
		                		<li>
		                			<div class="slimScroll" style="postion:relative;overflow:hidden;width:auto;height:200px">
		                				<ul class="menu" style="overflow:hidden;width:100%;height:200px">
		                					<li id="email_content" th:each="email : ${push_email}">
		                						<a href="#">
		                							<div class="pull-left">
		                								<img src="/gradesign/img/icon.gif" class="img-circle" alt="User Image"></img>
		                							</div>
		                							<h4 th:text="${email.email_subject}">
		                							<small style="margin-left: 40px;">
		                							<i class="fa fa-clock-o"></i><span th:text="${email.created_time}"></span>
		                							</small>
		                							</h4>
		                							<p th:text="${email.email_content}"></p>  
		                						</a>
		                					</li>
		                				</ul>
		                			</div>
		                		</li>
		                		<li class="footer">
		                			<a href="#">更多</a>
		                		</li>
                		</ul>
                	</li>
                	<li id="msgMenu" class="dropdown notifications-menu">
                		<a href="#" class="dropdown-toggle" style="height:50px" data-toggle="dropdown" aria-expanded="false">
                			<i class="fa fa-bell-o" style="color: white; "></i>
                			<span id="msg_amount_head" class="label label-warninf" style="color:red ;background-color: orange;" th:text="${push_msg_amount}"></span>
                		</a>
                		<ul class="dropdown-menu msg_menu"> 
	                		<li class="header">你有<span id="msg_amount" th:text="${push_msg_amount}"></span>条未读消息</li>
		                		<li>
		                			<div class="slimScrollDiv" style="postion:relative;overflow:hidden;width:auto;height:200px">
		                				<ul class="menu" style="overflow:hidden;width:100%;height:200px">
		                					<li id="msg_content" th:each="msg : ${push_msg}">
		                						<a href="#">
		                							<i class="fa fa-users text-aqua"></i><span th:text="${msg.content}"></span>
		                						</a>
		                					</li>
		                				</ul>
		                			</div>
		                		</li>
		                		<li class="footer">
		                			<a href="#">更多</a>
		                		</li>
                		</ul>
                	</li>
                    <li id="userMenu" class="dropdown user-menu">
                        <a href="#" class="dropdown-toggle" style="height:50px" height="50px" data-toggle="dropdown">
                            <img src="/gradesign/img/icon.gif" width="40px" height="40px" alt="User Image" class="user-image" />
                            <span style="color:blue" th:text="${familyAccount}"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                        	<li>
                        		<a href="/gradesign/logout">
                        			<i class="fa fa-sign-out fa-fw"></i>
                        			<span>退出登录</span>
                        		</a>
                        	</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="/gradesign/img/icon.gif" class="img-circle"  th:title="title" title="tit" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <h4 th:text="${familyAccount}"></h4>
                </div>
            </div>
            <ul class="sidebar-menu">
                <li class="header">菜单</li>
                <li class="treeview" th:each="backMenuList : ${backMenuList}">
              		<a th:href="${backMenuList.menu_url}" target="mainFrame">
                        <i class="fa fa-table"></i>
                        <span th:text="${backMenuList.menu_name}" ></span>
                	</a>
                </li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper">
        <!-- 在SpringBoot中使用src会自动交给MVC的dispatcher来识别映射 -->
        <iframe name="mainFrame" id="mainFrame" src="/gradesign/backMain/main" frameborder="false" scrolling="yes" style="border:none;" width="100%" height="100%" allowtransparency="true"></iframe>
    </div>
</div>
</body>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/js/app.min.js"></script>
<script type="text/javascript" src="/gradesign/js/index.js"></script>
<script type="text/javascript" src="/gradesign/js/login.js"></script>
</html>